<template>
  <view class="container">
    <view class="main">
      <view class="nav">
        <view class="header">
          <view class="left" v-if="orderType == 'takein'">
            <view class="store-name">
              <text>深圳市教育路大学店</text>
              <view class="iconfont iconarrow-right"></view>
            </view>
            <view class="store-location">
              <up-icon name="map"></up-icon>
              <text>距离您 1.0km</text>
            </view>
          </view>
          <view class="left overflow-hidden" v-else>
            <view class="d-flex align-items-center overflow-hidden">
              <image src="/static/images/order/location.png" style="width: 30rpx; height: 30rpx" class="mr-10"></image>
              <view class="font-size-extra-lg text-color-base font-weight-bold text-truncate">
                {{ address.street }}
              </view>
            </view>
            <view class="font-size-sm text-color-assist overflow-hidden text-truncate">
              由<text class="text-color-base" style="margin: 0 10rpx">{{
                store.name
              }}</text>配送
            </view>
          </view>
          <view class="right">
            <view class="dinein" :class="{ active: orderType == 'takein' }" @tap="SET_ORDER_TYPE('takein')">
              <text>自取</text>
            </view>
            <view class="takeout" :class="{ active: orderType == 'takeout' }" @tap="takout">
              <text>外卖</text>
            </view>
          </view>
        </view>
        <view class="coupon">
          <text class="title">"霸气mini卡"超级购券活动，赶紧去购买</text>
          <up-icon name="arrow-right" color="#f0ad4e"></up-icon>
        </view>
      </view>
      <view class="u-menu-wrap content">
        <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
          :scroll-into-view="itemId">
          <view v-for="(item, index) in tabbar" :key="index" class="u-tab-item"
            :class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
            <text class="u-line-1">{{ item.name }}</text>
          </view>
        </scroll-view>

        <scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box goods"
          @scroll="rightScroll">
          <view class="page-view wrapper">
            <swiper class="ads" id="ads" autoplay :interval="3000" indicator-dots>
              <swiper-item v-for="(item, index) in ads" :key="index">
                <image :src="item.image"></image>
              </swiper-item>
            </swiper>


            <view class="list">
              <view class="class-item category" :id="'item' + index" v-for="(item, index) in tabbar" :key="index">
                <!-- <view class="item-title">
						<text>{{ item.name }}</text>
					</view> -->
                <view class="title">
                  <text>{{ item.name }}</text>
                  <image :src="item.icon" class="icon"></image>
                </view>
                <view class="item-container items">
                  <view class="thumb-box good" v-for="(good, index1) in item.goods_list" :key="index1"
                    @click="toDetail(good)">

                    <image :src="good.images" class="image"></image>
                    <view class="right">
                      <text class="name">{{ good.name }}</text>
                      <text class="tips">{{ good.content }}</text>
                      <view class="price_and_action">
                        <text class="price">￥{{ good.price }}</text>
                        <view class="btn-group" v-if="good.use_property">
                          <up-button type="warning" class="btn property_btn" hover-class="none" size="mini"
                            bgColor="#f0ad4e">
                            选规格
                          </up-button>
                          <view class="dot" v-show="goodCartNum(good.id)">{{ goodCartNum(good.id) }}</view>
                        </view>
                        <view class="btn-group" v-else>
                          <up-button type="default" v-show="goodCartNum(good.id)" plain class="btn reduce_btn"
                            size="mini" hover-class="none" @tap="handleReduceFromCart(item, good)">
                            <view class="iconfont iconsami-select"></view>
                          </up-button>
                          <view class="number" v-show="goodCartNum(good.id)">{{ goodCartNum(good.id) }}</view>
                          <view type="primary" class="btn add_btn" size="min" hover-class="none"
                            @tap="handleAddToCart(item, good, 1)">
                            <up-icon size="30" name="plus-circle-fill" color="#f0ad4e"
                              class="iconfont iconadd-select"></up-icon>

                            <!-- <view class="iconfont iconadd-select"></view> -->
                          </view>
                        </view>
                      </view>
                    </view>

                    <!-- <image
							class="item-menu-image"
							:src="item1.coverImgUrl"
							mode=""
						></image>
						<view class="item-menu-name">{{ item1.name }}</view>
						-->
                  </view>
                </view>
              </view>

            </view>

          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import {
  reactive,
  toRefs,
  ref,
  onMounted,
  defineComponent,
  nextTick,
  computed,
} from "vue";
const cart = ref([{ id: 1 }]);
//计算单个饮品添加到购物车的数量
const goodCartNum = computed(() => {
  return (id: string) =>
    cart.value.reduce((acc, cur) => {
      if (cur.id === id) {
        return (acc += cur.number);
      }
      return acc;
    }, 0);
});
const menuCartNum = computed(() => {
  return (id: string) =>
    cart.value.reduce((acc, cur) => {
      if (cur.cate_id === id) {
        return (acc += cur.number);
      }
      return acc;
    }, 0);
});
//计算购物车总数
const getCartGoodsNumber = computed(() => {
  return 0;
  //return cart.reduce((acc, cur) => acc + cur.number, 0)
});
const getCartGoodsPrice = computed(() => {
  return 0;
  //计算购物车总价
  //return cart.reduce((acc, cur) => acc + cur.number * cur.price, 0)
});
const disabledPay = computed(() => {
  return 0;
  //return orderType == 'takeout' && (getCartGoodsPrice < this.store.min_price) ? true : false
}); //是否达到起送价

const spread = computed(() => {
  return 0;
  //差多少元起送
  if (orderType != "takeout") return;
  //return parseFloat((this.store.min_price - this.getCartGoodsPrice).toFixed(2))
});

const ads = ref([

  {
    image:
      "https://images.qmai.cn/s23107/2020/05/08/c25de6ef72d2890630.png?imageView2/2/w/600/h/600",
  },

  {
    image:
      "https://images.qmai.cn/s23107/2020/04/30/b3af19e0de8ed42f61.jpg?imageView2/2/w/600/h/600",
  },
  {
    image:
      "https://img-shop.qmimg.cn/s23107/2020/04/17/8aeb78516d63864420.jpg?imageView2/2/w/600/h/600",
  },
]);
const orderType = ref("takein");
const tabbar = ref([
  {
    sort: 1,
    icon: "",
    id: 6905,
    goods_list: [
      {
        sell_time_status: 0,
        id: 65825,
        is_sell: true,
        pack_cost: "0.00",
        sales: 487,
        goods_type: 1,
        cover_img: "",
        property: [],
        goods_meals_info: [],
        is_add: 1,
        use_spec: false,
        entity: [
          {
            spec_id: "",
            trade_mark: "11110090",
            id: "9ad36aa96636c246",
            stock: "9999956.00",
            spec_text: [],
            spec: [],
            image: "s23107/2020/04/19/fda6dd99c83af02353.jpg",
            num: 1,
            price: 18.5,
            membership_price: 0,
          },
        ],
        stall_code: "",
        sort: 99,
        price: 18.5,
        unit: "件",
        imageArr: [
          "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/600/h/600",
        ],
        membership_price: 0,
        use_property: 10,
        unit_type: 0,
        min_buy_num: 0,
        specs: [],
        content: "购买三明治,享早餐指定饮品半价",
        is_follow_suit: 1,
        stock: "9999956.00",
        type: 2,
        is_label: 0,
        name: "早餐",
        images:
          "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400",
      },
    ],
    name: "早餐",
    is_show_backstage: 0,
  },

  {
    sort: 2,
    icon: "https://img-shop.qmimg.cn/s23107/2019/04/30/458c5a14fb2f190f96.png?imageView2/0/w/200/h/200",
    id: 6208,
    goods_list: [
      {
        sell_time_status: 0,
        id: 24516,
        pack_cost: "0.00",
        sales: 1278,
        cover_img: "",
        property: [],
        is_sell: true,
        goods_type: 1,
        entity: [
          {
            spec_id: "",
            trade_mark: "1212000070",
            id: "5d79de67251ea00e",
            stock: "10485.00",
            spec_text: [],
            spec: [],
            image: "s23107/2020/04/29/4a62ee45dd527609ed.jpg",
            num: 1,
            price: 18,
            membership_price: 0,
          },
        ],
        stall_code: "",
        sort: 3,
        price: 18,
        unit: "件",
        imageArr: [
          "https://img-shop.qmimg.cn/s23107/2020/04/29/4a62ee45dd527609ed.jpg?imageView2/2/w/600/h/600",
        ],
        membership_price: 0,
        use_property: 0,
        unit_type: 0,
        min_buy_num: 0,
        specs: [],
        content: "酥软口感,进口奶油搭配特制巧克力内馅",
        use_spec: false,
        stock: "10485.00",
        type: 1,
        is_label: 0,
        name: "脏脏王",
        images:
          "https://img-shop.qmimg.cn/s23107/2020/04/29/4a62ee45dd527609ed.jpg?imageView2/2/w/400/h/400",
      },
      {
        sell_time_status: 0,
        id: 24517,
        pack_cost: "0.00",
        sales: 1228,
        cover_img: "",
        property: [],
        is_sell: true,
        goods_type: 1,
        entity: [
          {
            spec_id: "",
            trade_mark: "1212000071",
            id: "2b3f1ea3ecabd22e",
            stock: "10308.00",
            spec_text: [],
            spec: [],
            image: "s23107/2020/04/29/99daa7b20061efab10.jpg",
            num: 1,
            price: 18,
            membership_price: 0,
          },
        ],
        stall_code: "",
        sort: 4,
        price: 18,
        unit: "件",
        imageArr: [
          "https://img-shop.qmimg.cn/s23107/2020/04/29/99daa7b20061efab10.jpg?imageView2/2/w/600/h/600",
        ],
        membership_price: 0,
        use_property: 0,
        unit_type: 0,
        min_buy_num: 0,
        specs: [],
        content: "精选北川半兵卫抹茶粉和秘制红豆泥",
        use_spec: false,
        stock: "10308.00",
        type: 1,
        is_label: 0,
        name: "抹茶王",
        images:
          "https://img-shop.qmimg.cn/s23107/2020/04/29/99daa7b20061efab10.jpg?imageView2/2/w/400/h/400",
      },
      {
        sell_time_status: 0,
        id: 68339,
        pack_cost: "0.00",
        sales: 44429,
        cover_img: "",
        property: [
          {
            is_open_checkbox: false,
            id: 190,
            values: [
              {
                is_default: 1,
                id: 582,
                code: "Z5EA54C3D0E4279185",
                value: "标准冰",
              },
              {
                is_default: 0,
                id: 583,
                code: "Z5EA54C3D0E9682750",
                value: "去冰",
              },
            ],
            name: "温度",
            desc: null,
          },
          {
            is_open_checkbox: false,
            id: 191,
            values: [
              {
                is_default: 1,
                id: 585,
                code: "Z5EA54C3D0F2A37322",
                value: "标准糖",
              },
              {
                is_default: 0,
                id: 586,
                code: "Z5EA54C3D0F70A1000",
                value: "少糖",
              },
              {
                is_default: 0,
                id: 1959,
                code: "Z5EA54C3D0FAFE7320",
                value: "不另外加糖",
              },
            ],
            name: "糖度",
            desc: null,
          },
        ],
        is_sell: true,
        goods_type: 2,
        entity: [
          {
            spec_id: "",
            trade_mark: "1010010025",
            id: "72cf1279c0a422ce",
            stock: "9999817.00",
            spec_text: [],
            spec: [],
            image: "s23107/2020/04/26/559a075d81060b23c7.jpg",
            num: 1,
            price: 30,
            membership_price: 0,
          },
        ],
        stall_code: "",
        sort: 0,
        price: 30,
        unit: "件",
        imageArr: [
          "https://img-shop.qmimg.cn/s23107/2020/04/26/559a075d81060b23c7.jpg?imageView2/2/w/600/h/600",
        ],
        membership_price: 0,
        use_property: 1,
        unit_type: 0,
        min_buy_num: 0,
        specs: [],
        content: "饱满大颗的新鲜杨梅,满杯手工去核,搭配茉莉初雪茶底,清爽多汁",
        use_spec: false,
        stock: "9999817.00",
        type: 1,
        is_label: 0,
        name: "霸气杨梅",
        images:
          "https://img1.baidu.com/it/u=1047945906,2612051836&fm=253&fmt=auto&app=138&f=JPEG?w=813&h=500",
      },
      {
        sell_time_status: 0,
        id: 68345,
        pack_cost: "0.00",
        sales: 16322,
        cover_img: "",
        property: [
          {
            is_open_checkbox: false,
            id: 190,
            values: [
              {
                is_default: 1,
                id: 582,
                code: "Z5EA55088766CC7824",
                value: "标准冰",
              },
              {
                is_default: 0,
                id: 583,
                code: "Z5EA5508876F271659",
                value: "去冰",
              },
            ],
            name: "温度",
            desc: null,
          },
          {
            is_open_checkbox: false,
            id: 191,
            values: [
              {
                is_default: 1,
                id: 585,
                code: "Z5EA55088776843559",
                value: "标准糖",
              },
              {
                is_default: 0,
                id: 586,
                code: "Z5EA5508877A528469",
                value: "少糖",
              },
              {
                is_default: 0,
                id: 1959,
                code: "Z5EA5508877E5A6908",
                value: "不另外加糖",
              },
            ],
            name: "糖度",
            desc: null,
          },
        ],
        is_sell: true,
        goods_type: 2,
        entity: [
          {
            spec_id: "",
            trade_mark: "1010010043",
            id: "c7c6f8fd34040338",
            stock: "999950.00",
            spec_text: [],
            spec: [],
            image: "s23107/2020/04/26/ea8fc439fddf2f62e3.jpg",
            num: 1,
            price: 32,
            membership_price: 0,
          },
        ],
        stall_code: "",
        sort: 2,
        price: 32,
        unit: "件",
        imageArr: [
          "https://img1.baidu.com/it/u=1047945906,2612051836&fm=253&fmt=auto&app=138&f=JPEG?w=813&h=500",
        ],
        membership_price: 0,
        use_property: 1,
        unit_type: 0,
        min_buy_num: 0,
        specs: [],
        content: "霸气杨梅和酸奶的首次搭配,甘甜可口",
        use_spec: false,
        stock: "999950.00",
        type: 1,
        is_label: 0,
        name: "霸气酸奶杨梅",
        images:
          "https://img1.baidu.com/it/u=1047945906,2612051836&fm=253&fmt=auto&app=138&f=JPEG?w=813&h=500",
      },
    ],
    name: "新品推荐",
    is_show_backstage: 0,
  },
]);
const data = reactive({
  scrollTop: 0, //tab标题的滚动条位置
  oldScrollTop: 0,
  current: 0, // 预设当前项的值
  menuHeight: 0, // 左边菜单的高度
  menuItemHeight: 0, // 左边菜单item的高度
  itemId: "", // 栏目右边scroll-view用于滚动的id
  //tabbar: classifyData,
  menuItemPos: [],
  arr: [],
  scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
  timer: null, // 定时器
});
const {
  scrollTop,
  oldScrollTop,
  current,
  menuHeight,
  menuItemHeight,
  itemId,
  menuItemPos,
  arr,
  scrollRightTop,
  timer,
} = toRefs(data);
// 点击左边的栏目切换
const swichMenu = async (index) => {
  if (arr.value.length == 0) {
    await getMenuItemTop();
  }
  if (index == current.value) return;
  scrollRightTop.value = oldScrollTop.value;
  nextTick(function () {
    scrollRightTop.value = arr.value[index];
    current.value = index;
    leftMenuStatus(index);
  });
};
// 			// 获取一个目标元素的高度
const getElRect = (elClass, dataVal) => {
  new Promise((resolve, reject) => {
    const query = uni.createSelectorQuery().in(this);
    query
      .select("." + elClass)
      .fields(
        {
          size: true,
        },
        (res) => {
          // 如果节点尚未生成，res值为null，循环调用执行
          if (!res) {
            setTimeout(() => {
              getElRect(elClass);
            }, 10);
            return;
          }
          [dataVal].value = res.height;
          resolve();
        }
      )
      .exec();
  });
};
// 			// 观测元素相交状态
const observer = async () => {
  tabbar.value.map((val, index) => {
    let observer = uni.createIntersectionObserver(this);
    // 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
    // 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
    observer
      .relativeTo(".right-box", {
        top: 0,
      })
      .observe("#item" + index, (res) => {
        if (res.intersectionRatio > 0) {
          let id = res.id.substring(4);
          leftMenuStatus(id);
        }
      });
  });
};
// 			// 设置左边菜单的滚动状态
const leftMenuStatus = async (index) => {
  current.value = index;
  // 如果为0，意味着尚未初始化
  if (menuHeight.value == 0 || menuItemHeight.value == 0) {
    await getElRect("menu-scroll-view", "menuHeight");
    await getElRect("u-tab-item", "menuItemHeight");
  }
  // 将菜单活动item垂直居中
  scrollTop.value =
    index * menuItemHeight.value +
    menuItemHeight.value / 2 -
    menuHeight.value / 2;
};
// 			// 获取右边菜单每个item到顶部的距离
const getMenuItemTop = () => {
  new Promise((resolve) => {
    let selectorQuery = uni.createSelectorQuery();
    selectorQuery
      .selectAll(".class-item")
      .boundingClientRect((rects) => {
        // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
        if (!rects.length) {
          setTimeout(() => {
            getMenuItemTop();
          }, 10);
          return;
        }
        rects.forEach((rect) => {
          // 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
          arr.value.push(rect.top - rects[0].top);
          resolve();
        });
      })
      .exec();
  });
};
// 			// 右边菜单滚动
const rightScroll = async (e) => {
  oldScrollTop.value = e.detail.scrollTop;
  if (arr.value.length == 0) {
    await getMenuItemTop();
  }
  if (timer.value) return;
  if (!menuHeight.value) {
    await getElRect("menu-scroll-view", "menuHeight");
  }
  setTimeout(() => {
    // 节流
    timer.value = null;
    // scrollHeight为右边菜单垂直中点位置
    let scrollHeight = e.detail.scrollTop + menuHeight.value / 2;
    for (let i = 0; i < arr.value.length; i++) {
      let height1 = arr.value[i];
      let height2 = arr.value[i + 1];
      // 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
      if (!height2 || (scrollHeight >= height1 && scrollHeight < height2)) {
        leftMenuStatus(i);
        return;
      }
    }
  }, 10);
};
onMounted(() => { });
</script>

<style lang="scss" scoped>
// .u-wrap {
// 	height: calc(100vh);
// 	/* #ifdef H5 */
// 	height: calc(100vh - var(--window-top));
// 	/* #endif */
// 	display: flex;
// 	flex-direction: column;
// }

// .u-search-box {
// 	padding: 18rpx 30rpx;
// }

.u-menu-wrap {
  flex: 1;
  display: flex;
  overflow: hidden;
}

// .u-search-inner {
// 	background-color: rgb(234, 234, 234);
// 	border-radius: 100rpx;
// 	display: flex;
// 	align-items: center;
// 	padding: 10rpx 16rpx;
// }

// .u-search-text {
// 	font-size: 26rpx;
// 	color: $u-tips-color;
// 	margin-left: 10rpx;
// }

.u-tab-view {
  width: 200rpx;
  height: 100%;
}

.u-tab-item {
  height: 110rpx;
  background: #f6f6f6;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #444;
  font-weight: 400;
  line-height: 1;
}

.u-tab-item-active {
  position: relative;
  color: #000;
  font-size: 30rpx;
  font-weight: 600;
  background: #fff;
}

.u-tab-item-active::before {
  content: "";
  position: absolute;
  border-left: 4px solid $u-warning;
  height: 32rpx;
  left: 0;
  top: 39rpx;
}

.u-tab-view {
  height: 100%;
}

.right-box {
  background-color: rgb(250, 250, 250);
}

// .page-view {
// 	padding: 16rpx;
// }

.class-item {
  //margin-bottom: 30rpx;
  background-color: #fff;
  //padding: 16rpx;
  border-radius: 8rpx;
}

.class-item:last-child {
  min-height: 100vh;
}

.item-title {
  font-size: 26rpx;
  color: $u-main-color;
  font-weight: bold;
}

.item-menu-name {
  font-weight: normal;
  font-size: 24rpx;
  color: $u-main-color;
}

// .item-container {
// 	display: flex;
// 	flex-wrap: wrap;
// }

// .thumb-box {
// 	width: 33.333333%;
// 	display: flex;
// 	align-items: center;
// 	justify-content: center;
// 	flex-direction: column;
// 	margin-top: 20rpx;
// }

.item-menu-image {
  width: 120rpx;
  height: 120rpx;
}

/* #ifdef H5 */
// page {
// 	min-height: 100%;
// }
// /* #endif */

.container {
  overflow: hidden;
  position: relative;
}

// .loading {
// 	width: 100%;
// 	height: 100%;
// 	display: flex;
// 	align-items: center;
// 	justify-content: center;

// 	image {
// 		width: 260rpx;
// 		height: 260rpx;
// 		position: relative;
// 		margin-top: -200rpx;
// 		/* #ifdef h5 */
// 		margin-top: 0;
// 		/* #endif */
// 	}
// }

.stores {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: -40rpx;

  .store {
    width: 100%;
    background-color: $uni-bg-color-grey;
    padding: 20rpx;
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    border-radius: 6rpx;

    .iconfont {
      font-size: 50rpx;
      margin-right: 15rpx;

      &.iconradio-button-off {
        // color: $uni-text-color;
      }

      &.iconradio-button-on {
        // color: $uni-color-primary;
      }
    }

    .infos {
      flex: 1;
      display: flex;
      flex-direction: column;
      color: $uni-text-color;
      overflow: hidden;

      .name_and_distance {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10rpx;
        overflow: hidden;

        .name {
          flex: 1;
          flex-shrink: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: $uni-font-size-lg;
        }

        .distance {
          flex-shrink: 0;
          font-size: $uni-font-size-lg;
          font-weight: bold;
          margin-left: 20rpx;
        }
      }

      .street {
        color: $uni-text-color;
        font-size: $uni-font-size-sm;
      }
    }
  }
}

.main {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.nav {
  width: 100%;
  height: 212rpx;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;

  .header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    background-color: #ffffff;
    height: 140rpx;

    .left {
      flex: 1;
      display: flex;
      flex-direction: column;

      .store-name {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: $uni-font-size-lg;
        margin-bottom: 10rpx;

        .iconfont {
          margin-left: 10rpx;
          line-height: 100%;
        }
      }

      .store-location {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: $uni-text-color;
        font-size: $uni-font-size-sm;

        .iconfont {
          vertical-align: middle;
          display: table-cell;
          color: $uni-color-primary;
          line-height: 100%;
        }
      }
    }

    .right {
      background-color: $uni-bg-color-grey;
      border-radius: 38rpx;
      display: flex;
      align-items: center;
      font-size: $uni-font-size-sm;
      padding: 0 38rpx;
      color: $uni-text-color;

      .dinein,
      .takeout {
        position: relative;
        display: flex;
        align-items: center;

        &.active {
          padding: 14rpx 38rpx;
          color: #ffffff;
          background-color: $uni-color-warning;
          border-radius: 38rpx;
        }
      }

      .takeout {
        margin-left: 20rpx;
        height: 100%;
        flex: 1;
        padding: 14rpx 0;
      }

      .dinein.active {
        margin-left: -38rpx;
      }

      .takeout.active {
        margin-right: -38rpx;
      }
    }
  }

  .coupon {
    flex: 1;
    width: 100%;
    background-color: #f9e8d2;
    font-size: $uni-font-size-base;
    color: $uni-color-warning;
    padding: 0 20rpx;
    display: flex;
    align-items: center;
    overflow: hidden;

    .title {
      flex: 1;
      margin-left: 10rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .iconfont {
      line-height: 100%;
    }
  }
}

.content {
  flex: 1;
  overflow: hidden;
  width: 100%;
  display: flex;
  min-height: 100vh;
  //background-color: rebeccapurple;

  .menus {
    width: 200rpx;
    height: 100%;
    overflow: hidden;
    background-color: $uni-bg-color-grey;

    .wrapper {
      width: 100%;
      height: 100%;

      .menu {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 30rpx 20rpx;
        font-size: 26rpx;
        color: $uni-text-color;
        position: relative;

        &:nth-last-child(1) {
          margin-bottom: 130rpx;
        }

        &.current {
          background-color: #ffffff;
          color: $uni-text-color;
        }

        .dot {
          position: absolute;
          width: 34rpx;
          height: 34rpx;
          line-height: 34rpx;
          font-size: 22rpx;
          background-color: $uni-color-primary;
          color: #ffffff;
          top: 16rpx;
          right: 10rpx;
          border-radius: 100%;
          text-align: center;
        }
      }
    }
  }

  .goods {
    flex: 1;
    height: 100%;
    overflow: hidden;
    background-color: #ffffff;

    .wrapper {
      width: 100%;
      height: 100%;
      padding: 20rpx;

      .ads {
        height: calc(300 / 550 * 510rpx);

        image {
          width: 100%;
          height: 100%;
          border-radius: 8rpx;
        }
      }

      .list {
        width: 100%;
        font-size: $uni-font-size-base;
        padding-bottom: 130rpx;

        .category {
          width: 100%;

          .title {
            padding: 30rpx 0;
            display: flex;
            align-items: center;
            color: $uni-text-color;

            .icon {
              width: 38rpx;
              height: 38rpx;
              margin-left: 10rpx;
            }
          }
        }

        .items {
          display: flex;
          flex-direction: column;
          padding-bottom: -30rpx;

          .good {
            display: flex;
            align-items: center;
            margin-bottom: 30rpx;

            .image {
              width: 160rpx;
              height: 160rpx;
              margin-right: 20rpx;
              border-radius: 8rpx;
            }

            .right {
              flex: 1;
              height: 160rpx;
              overflow: hidden;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: space-between;
              padding-right: 14rpx;

              .name {
                font-size: $uni-font-size-base;
                margin-bottom: 10rpx;
              }

              .tips {
                width: 100%;
                height: 40rpx;
                line-height: 40rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: $uni-font-size-sm;
                color: $uni-text-color;
                margin-bottom: 10rpx;
              }

              .price_and_action {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .price {
                  font-size: $uni-font-size-base;
                  font-weight: 600;
                }

                .btn-group {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  position: relative;

                  .btn {
                    padding: 0 20rpx;
                    box-sizing: border-box;
                    font-size: $uni-font-size-sm;
                    //height: 44rpx;
                    line-height: 44rpx;

                    &.property_btn {
                      border-radius: 24rpx;
                    }

                    &.add_btn,
                    &.reduce_btn {
                      padding: 0;
                      //width: 44rpx;
                      border-radius: 44rpx;
                    }
                  }

                  .dot {
                    position: absolute;
                    background-color: #ffffff;
                    border: 1px solid $uni-color-primary;
                    color: $uni-color-primary;
                    font-size: $uni-font-size-sm;
                    width: 36rpx;
                    height: 36rpx;
                    line-height: 36rpx;
                    text-align: center;
                    border-radius: 100%;
                    right: -12rpx;
                    top: -10rpx;
                  }

                  .number {
                    width: 44rpx;
                    height: 44rpx;
                    line-height: 44rpx;
                    text-align: center;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

// .modal-box {
// 	max-height: 90vh;
// }

// .good-detail-modal {
// 	width: 100%;
// 	height: 100%;
// 	display: flex;
// 	flex-direction: column;

// 	.cover {
// 		height: 320rpx;
// 		padding: 30rpx 0;
// 		display: flex;
// 		justify-content: center;
// 		align-items: center;
// 		position: relative;

// 		.image {
// 			width: 260rpx;
// 			height: 260rpx;
// 		}

// 		.btn-group {
// 			position: absolute;
// 			right: 10rpx;
// 			top: 30rpx;
// 			display: flex;
// 			align-items: center;
// 			justify-content: space-around;

// 			image {
// 				width: 80rpx;
// 				height: 80rpx;
// 			}
// 		}
// 	}

// 	.detail {
// 		width: 100%;
// 		min-height: 1vh;
// 		max-height: calc(90vh - 320rpx - 80rpx - 120rpx);

// 		.wrapper {
// 			width: 100%;
// 			height: 100%;
// 			overflow: hidden;

// 			.basic {
// 				padding: 0 20rpx 30rpx;
// 				display: flex;
// 				flex-direction: column;
// 				.name {
// 					font-size: $uni-font-size-base;
// 					color: $uni-text-color;
// 					margin-bottom: 10rpx;
// 				}
// 				.tips {
// 					font-size: $uni-font-size-sm;
// 					color: $uni-text-color-grey;
// 				}
// 			}

// 			.properties {
// 				width: 100%;
// 				border-top: 2rpx solid $uni-bg-color-grey;
// 				padding: 10rpx 30rpx 0;
// 				display: flex;
// 				flex-direction: column;

// 				.property {
// 					width: 100%;
// 					display: flex;
// 					flex-direction: column;
// 					margin-bottom: 30rpx;
// 					padding-bottom: -16rpx;

// 					.title {
// 						width: 100%;
// 						display: flex;
// 						justify-content: flex-start;
// 						align-items: center;
// 						margin-bottom: 20rpx;

// 						.name {
// 							font-size: 26rpx;
// 							color: $uni-text-color;
// 							margin-right: 20rpx;
// 						}

// 						.desc {
// 							flex: 1;
// 							font-size: $font-size-sm;
// 							color: $uni-color-primary;
// 							overflow: hidden;
// 							text-overflow: ellipsis;
// 							white-space: nowrap;
// 						}
// 					}

// 					.values {
// 						width: 100%;
// 						display: flex;
// 						flex-wrap: wrap;

// 						.value {
// 							border-radius: 8rpx;
// 							background-color: $uni-bg-color-grey;
// 							padding: 16rpx 30rpx;
// 							font-size: 26rpx;
// 							color: $uni-text-color-assist;
// 							margin-right: 16rpx;
// 							margin-bottom: 16rpx;

// 							&.default {
// 								background-color: $uni-color-primary;
// 								color: $uni-text-color-white;
// 							}
// 						}
// 					}
// 				}
// 			}
// 		}
// 	}

// 	.action {
// 		display: flex;
// 		align-items: center;
// 		justify-content: space-between;
// 		background-color: $uni-bg-color-grey;
// 		height: 120rpx;
// 		padding: 0 26rpx;

// 		.left {
// 			flex: 1;
// 			display: flex;
// 			flex-direction: column;
// 			justify-content: center;
// 			margin-right: 20rpx;
// 			overflow: hidden;

// 			.price {
// 				font-size: $uni-font-size-lg;
// 				color: $uni-text-color;
// 			}

// 			.props {
// 				color: $uni-text-color-assist;
// 				font-size: 24rpx;
// 				width: 100%;
// 				overflow: hidden;
// 				text-overflow: ellipsis;
// 				white-space: nowrap;
// 			}
// 		}
// 		.btn-group {
// 			display: flex;
// 			align-items: center;
// 			justify-content: space-around;

// 			.number {
// 				font-size: $uni-font-size;
// 				width: 44rpx;
// 				height: 44rpx;
// 				line-height: 44rpx;
// 				text-align: center;
// 			}

// 			.btn {
// 				padding: 0;
// 				font-size: $uni-font-size;
// 				width: 44rpx;
// 				height: 44rpx;
// 				line-height: 44rpx;
// 				border-radius: 100%;
// 			}
// 		}
// 	}

// 	.add-to-cart-btn {
// 		display: flex;
// 		justify-content: center;
// 		align-items: center;
// 		background-color: $uni-color-primary;
// 		color: $uni-text-color-white;
// 		font-size: $uni-font-size-base;
// 		height: 80rpx;
// 		border-radius: 0 0 12rpx 12rpx;
// 	}
// }

// .cart-box {
// 	position: absolute;
// 	bottom: 30rpx;
// 	left: 30rpx;
// 	right: 30rpx;
// 	height: 96rpx;
// 	border-radius: 48rpx;
// 	box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
// 	background-color: #FFFFFF;
// 	display: flex;
// 	align-items: center;
// 	justify-content: space-between;
// 	z-index: 9999;

// 	.cart-img {
// 		width: 96rpx;
// 		height: 96rpx;
// 		position: relative;
// 		margin-top: -48rpx;
// 	}

// 	.pay-btn {
// 		height: 100%;
// 		padding: 0 30rpx;
// 		color: #FFFFFF;
// 		border-radius: 0 50rpx 50rpx 0;
// 		display: flex;
// 		align-items: center;
// 		font-size: $uni-font-size-base;
// 	}

// 	.mark {
// 		padding-left: 46rpx;
// 		margin-right: 30rpx;
// 		position: relative;

// 		.tag {
// 			background-color: $uni-color-warning;
// 			color: $uni-text-color-white;
// 			display: flex;
// 			justify-content: center;
// 			align-items: center;
// 			font-size: $uni-font-size-sm;
// 			position: absolute;
// 			right: -10rpx;
// 			top: -50rpx;
// 			border-radius: 100%;
// 			padding: 4rpx;
// 			width: 40rpx;
// 			height: 40rpx;
// 			opacity: .9;
// 		}
// 	}

// 	.price {
// 		flex: 1;
// 		color: $uni-text-color-base;
// 	}
// }

// .cart-popup {
// 	.top {
// 		background-color: $uni-bg-color-primary;
// 		color: $uni-color-primary;
// 		padding: 10rpx 30rpx;
// 		font-size: 24rpx;
// 		text-align: right;
// 	}
// 	.cart-list {
// 		background-color: #FFFFFF;
// 		width: 100%;
// 		overflow: hidden;
// 		min-height: 1vh;
// 		max-height: 60vh;

// 		.wrapper {
// 			height: 100%;
// 			display: flex;
// 			flex-direction: column;
// 			padding: 0 30rpx;
// 			margin-bottom: 156rpx;

// 			.item {
// 				display: flex;
// 				justify-content: space-between;
// 				align-items: center;
// 				padding: 30rpx 0;
// 				position: relative;

// 				&::after {
// 					content: ' ';
// 					position: absolute;
// 					bottom: 0;
// 					left: 0;
// 					width: 100%;
// 					background-color: $uni-border-color;
// 					height: 2rpx;
// 					transform: scaleY(.6);
// 				}

// 				.left {
// 					flex: 1;
// 					display: flex;
// 					flex-direction: column;
// 					overflow: hidden;
// 					margin-right: 30rpx;

// 					.name {
// 						font-size: $uni-font-size-sm;
// 						color: $uni-text-color-base;
// 					}
// 					.props {
// 						color: $uni-text-color-assist;
// 						font-size: 24rpx;
// 						overflow: hidden;
// 						text-overflow: ellipsis;
// 						white-space: nowrap;
// 					}
// 				}

// 				.center {
// 					margin-right: 120rpx;
// 					font-size: $uni-font-size-base;
// 				}

// 				.right {
// 					display: flex;
// 					align-items: center;
// 					justify-content: space-between;

// 					.btn {
// 						width: 46rpx;
// 						height: 46rpx;
// 						border-radius: 100%;
// 						padding: 0;
// 						text-align: center;
// 						line-height: 46rpx;
// 					}

// 					.number {
// 						font-size: $uni-font-size-base;
// 						width: 46rpx;
// 						height: 46rpx;
// 						text-align: center;
// 						line-height: 46rpx;
// 					}
// 				}
// 			}
// 		}
// 	}
// }</style>
